<template>
    <main>
        <header>
            <div>
                <img src="../assets/images/qc/mst_1c252aedf11afe7f5b4dc04b6d27fb9e_750x205_90.jpg" alt="" >
            </div>
            <div>
                <img src="../assets/images/qc/mst_55c25d21f147d20d1e9b189f93a270ba_750x73_90.jpg" alt="" > 
            </div>
            <div>
                <img src="../assets/images/qc/mst_3cea1bddb402c664d0c124fad045f8db.gif" alt="">
                <div class="fqz"><span>3.9</span><span>万人正在疯抢</span></div>
                <font-awesome-icon icon="chevron-circle-right" class="icon"/>
                <ul class="com1">
                    <li v-for="(item,index) in com1" class="com1_li">
                        <img :src="item.src" alt="">
                        <div>
                            <img src="../assets/images/qc/1/mst_20ef5a1a2608a7c63afbd36be48ca9f2_140x32_90.png" alt="">
                            <div><span>低至 </span><span>{{item.con}}</span></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <img src="../assets/images/qc/2/mst_60fd40109b7a4a61862b38292f2425d4_750x402_90.jpg" alt="">
                <ul class="com2">
                    <li v-for="(item,index) in com2">
                        <div><img :src="item.src" alt=""></div>
                        <div><img :src="item.ico" alt=""></div>
                        <div><span>{{item.price}}</span></div>       
                    </li>
                </ul>
            </div>
            <div>
                <div class="com3">
                    <img src="../assets/images/qc/3/mst_28ea8c709fa0454321a13081929ad2b1_375x149_90.jpg" alt="">
                    <img src="../assets/images/qc/3/mst_f8b4b7991a38722f13a9682fa7926d61_375x149_90.jpg" alt="">
                </div>
            </div>
            <div>
                <img src="../assets/images/qc/mst_f9114f3760caa7af14bdabbfbc87e2e4_750x80_90.png" alt="">
            </div>
            <div>
                <div class="com4" v-for="(item,index) in com4">
                    <div class="com4_header">
                        <div>
                            <img :src="item.src" alt="">
                        </div>
                        <span>{{item.name}}</span>
                        <div>
                            <span>进入专场></span>
                        </div>
                    </div>
                    <ul>
                        <li v-for="(item,index) in item.list">
                            <img :src="item.src1" alt="">
                            <div class="com4_d1"><span class="sales">特卖价</span><span class="sales_1">{{item.price}}</span></div>
                            <div class="com4_d2"><del>{{item.con}}</del></div>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
    </main>
</template>
<script>
    export default{
        data(){
            return{
                com1:[],
                com2:[],
                com4:[]
            }
        },
        mounted(){
            this.$http.get('./data/qc.json', {

            })
            .then((response)=> {
                console.log(response);
                this.com1=response.data.com1
                this.com2=response.data.com2
                this.com4=response.data.com4
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });  
        }
    }
</script>
<style scoped>
    main{
        background-color: #f2f2f2;
    }
    header>div{
        padding:0;
        position: relative;
    }
    header>div>img{
        float: left;
        width: 100vw;
    }
    header>div:after{
        content: "";
        display: table;
        clear: both;
    }
    .com1{
        position: absolute;
        padding: 4vw;
        top:19vw
    }
    .com1_li{
        float: left;
        width: 20vw;
        margin: 0 1.5vw;
        position: relative;
    }
    .com1_li img{
        width: 100%;
    }
    .com1_li>div>img{
        margin: 1vw 0 2vw 0;
    }
    .com1_li>div>div{
        position: absolute;
        top:12vw;
        left: 2.5vw;
        color: #ce876f;
    }
    .fqz{
        position: absolute;
        left: 45vw;
        top:11vw;
        color: #fff;
        line-height: 3vw;
    }
    .fqz>span{
        font-size: 2vw;
    }
    .icon{
        position: absolute;
        color: #fff;
        right: 30vw;
        top:11vw;
        width: 2.5vw;
    }
    .com2{
        width: 100vw;
        position: absolute;
        top:13vw;
        padding: 0 3vw;
    }
    .com2 li{
        float: left;
        width: 23.5vw;
        text-align: center;
        padding: 0 1.75vw;
    }
    .com2>li>div:nth-of-type(1)>img{
        width:100%
    }
    .com2>li>div:nth-of-type(2)>img{
        width:80%
    }
    .com2 li>div{
        margin-top:1vw
    }
    .com2 li>div>span{
        color:#da1616
    }
    .com3>img{
        width:50%;
        float: left;
    }
    .com4{
        position: relative;
        width: 94vw;
        margin:0 2.5vw 3vw ;
        /* height: 200px; */
        background: #fff;
        box-shadow: 0 0.2vw 0.4vw;
        border-radius: 0 0 2vw 2vw;
    }
    .com4:after{
        content: "";
        display: table;
        clear: both;
    }
    .com4_header{
        position: relative;
        width:100%;
        height: 16vw;
        padding: 2vw 4vw;
        background-image: linear-gradient(#fff, #faf1f6);
    }
    .com4_header>div:nth-of-type(1){
        position: relative;
        padding: 1vw;
        width: 12vw;
        height: 12vw;
        border: 1px solid #d8d8d8;
        /* text-align: center; */
        float: left;
    }
    .com4_header>div:nth-of-type(1)>img{
        width: 100%;
        height: 100%;
    }
    .com4_header>span{
        line-height: 12vw;
        padding-left: 5vw;
    }
    .com4_header>div:nth-of-type(2){
        float: right;
        border: 1px solid #ed7fba;
        padding: 0 1.5vw 0 3vw;
        border-radius: 5vw;
        margin-top: 3vw;
        background-color: #fff;
    }
    .com4_header>div:nth-of-type(2)>span{
        color:#ed7fba; 
    }
    .com4>ul{
        width: 94vw;
        padding: 2vw 2vw 0;
    }
    .com4>ul::after{
        content: "";
        display: table;
        clear: both;
    }
    .com4>ul>li{
        float: left;
        width: 30vw;
        padding: 0 1vw;
    }
    .com4>ul>li>img{
        width: 100%;
        border-radius: 2vw;
    }
    .sales{
        background-image: linear-gradient(90deg,#f03867,#cb78dc);
        border-radius: 3vw;
        padding: 0.2vw 1.4vw;
        color: #fff;
    }
    .sales_1{
        margin-left: 1vw;
        font-size: 3.5vw;
    }
    .com4_d1{
        padding-top: 2vw;
    }
    .com4_d2{
        padding-bottom: 2vw;
    }
</style>